<template>
  <a-divider>常规属性</a-divider>
  <a-form
    :model="element"
    :label-col="{ span: 10 }"
    :wrapper-col="{ span: 14 }"
    autocomplete="off"
    labelAlign="left"
  >
    <a-form-item label="文字位置" name="orientation" >
      <a-select v-model:value="element.options.orientation" size="small">
        <a-select-option value="left">left</a-select-option>
        <a-select-option value="center">center</a-select-option>
        <a-select-option value="right">right</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="内容" name="content" >
      <a-input v-model:value="element.options.content" size="small" />
    </a-form-item>
  </a-form>
</template>

<script setup>
import { inject, reactive } from 'vue'

const WidgetData = inject('$WidgetData')
const element = reactive(WidgetData.find(WidgetData.selectKey))
</script>